<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :span="14">
                        <a-form-item label="根据时间进行查询">
                            <j-date placeholder="请选择开始时间" class="query-group-cust"
                                v-model="queryParam.startTime"></j-date>
                            <span class="query-group-split-cust"></span>
                            <j-date placeholder="请选择结束日期" class="query-group-cust"
                                v-model="queryParam.endTime"></j-date>
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <a-row :gutter="24" :style="{ marginTop: '16px' }">
            <a-col :span="8">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>合格记录总数(条)</span>
                        <el-tooltip class="item" effect="dark" placement="top">
                            <div slot="content">合格记录总数(条)
                                <hr />
                                合格车辆数 : 每个车牌号只出现一次的合格记录总数<br>
                                对车牌号进行去重处理
                            </div>
                            <el-button icon="el-icon-more" circle
                                style="float: right; padding: 5px 5px"></el-button>
                        </el-tooltip>
                    </div>
                    <div class="text item" style="font-size: 44px;">{{qualifiedTotal.total}}</div>
                    <div class="text item">合格车辆数 {{qualifiedTotal.totalUnique}}</div>
                </el-card>
            </a-col>
            <a-col :span="8">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>驳回记录总数(条)</span>
                        <el-tooltip class="item" effect="dark" placement="top">
                            <div slot="content">驳回记录总数(条)
                                <hr />
                                驳回车辆数 : 每个车牌号只出现一次的驳回记录总数<br>
                                对车牌号进行去重处理
                            </div>
                            <el-button icon="el-icon-more" circle
                                style="float: right; padding: 5px 5px"></el-button>
                        </el-tooltip>
                    </div>
                    <div class="text item" style="font-size: 44px;">{{noPassTotal.noPassTotal}}
                    </div>
                    <div class="text item">驳回车辆数 {{noPassTotal.noPassUnique}}</div>
                </el-card>
            </a-col>
            <a-col :span="8">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>验罐不合格记录总数(条)</span>
                        <el-tooltip class="item" effect="dark" placement="top">
                            <div slot="content">验罐不合格记录总数(条)
                                <hr />
                                验罐不合格车辆数 : 每个车牌号只出现一次的验罐不合格记录总数<br>
                                对车牌号进行去重处理
                            </div>
                            <el-button icon="el-icon-more" circle
                                style="float: right; padding: 5px 5px"></el-button>
                        </el-tooltip>
                    </div>
                    <div class="text item" style="font-size: 44px;">
                        {{unqualifiedTotal.unqualifiedTotal}}</div>
                    <div class="text item">验罐不合格车辆数 {{unqualifiedTotal.unqualifiedUnique}}</div>
                </el-card>
            </a-col>
        </a-row>
        <div style="display: flex;">
            <div id="qualified" ref="qualified"
                style="height: 300px; width: 50%;  margin-top: 60px;"></div>
            <div id="noPass" ref="noPass" style="height: 300px; width: 50%; margin-top: 60px;">
            </div>
        </div>
        <div style="display: flex;">
            <div id="unQualified" ref="unQualified"
                style="height: 300px; width: 50%; margin-top: 60px;"></div>
            <div id="bing" ref="bing" style="height: 300px; width: 50%; margin-top: 60px;"></div>
        </div>
    </div>
</template>
<script>
import { httpAction, getAction, postAction } from '@/api/manage'
import * as echarts from 'echarts';
export default {
    data() {
        return {
            queryParam: {
                startTime: undefined,
                endTime: undefined
            },
            url: {
                reportCard: "/tankerRegistration/tankerRegistration/reportCard",
                reportBarQualified: "/tankerRegistration/tankerRegistration/reportBarQualified",
                reportBarNoPass: "/tankerRegistration/tankerRegistration/reportBarNoPass",
                reportBarUnQualified: "/tankerRegistration/tankerRegistration/reportBarUnQualified",
            },
            qualifiedTotal: { total: 0, totalUnique: 0 },
            noPassTotal: { noPassTotal: 0, noPassUnique: 0 },
            unqualifiedTotal: { unqualifiedTotal: 0, unqualifiedUnique: 0 },
        }
    },
    created() {
        const now = new Date();
        // this.queryParam.startTime = this.formatDate(new Date(now.getFullYear(), now.getMonth(), 1));
        // this.queryParam.endTime = this.formatDate(new Date(now.getFullYear(), now.getMonth() + 1, 0));
    },
    mounted() {
        this.searchQuery()
    },
    methods: {
        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1，并补零  
            const day = String(date.getDate()).padStart(2, '0'); // 补零  
            return `${year}-${month}-${day}`;
        },
        searchQuery() {
            this.reportCard()
            this.reportBarQualified()
            this.reportBarNoPass()
            this.reportBarUnQualified()
        },
        reportCard() {
            postAction(this.url.reportCard, this.queryParam).then((res) => {
                if (res.success) {
                    this.qualifiedTotal = res.result[0]
                    this.noPassTotal = res.result[1]
                    this.unqualifiedTotal = res.result[2]
                    this.$nextTick(() => {
                        this.showPie(res.result)
                    })
                }
            })
        },
        reportBarQualified() {
            postAction(this.url.reportBarQualified, this.queryParam).then((res) => {
                if (res.success) {
                    this.$nextTick(() => {
                        this.qualified(res.result)
                    })

                }
            })
        },
        reportBarNoPass() {
            postAction(this.url.reportBarNoPass, this.queryParam).then((res) => {
                if (res.success) {
                    this.$nextTick(() => {
                        this.noPass(res.result)
                    })
                }
            })
        },
        reportBarUnQualified() {
            postAction(this.url.reportBarUnQualified, this.queryParam).then((res) => {
                if (res.success) {
                    this.$nextTick(() => {
                        this.unQualified(res.result)
                    })
                }
            })
        },
        qualified(result) {
            console.log(result)
            let month = []
            let qualifiedCount = []
            let qualifiedDistinct = []
            result.forEach((element) => {
                month.push(element.month)
                qualifiedCount.push(element.qualifiedCount)
                qualifiedDistinct.push(element.qualifiedDistinct)
            })
            let myChart = echarts.init(document.getElementById('qualified'));
            myChart.setOption(
                {
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true,
                                excludeComponents: ['toolbox'],
                                pixelRatio: 2 // 控制导出图片的分辨率  
                            }
                        }
                    },
                    title: {
                        text: "合格记录与车辆数统计图",
                        textStyle: {
                            color: '#1E1E1E',
                            fontSize: 18,
                            fontWeight: 500,
                        },
                        padding: [20, 0, 20, 150], //标题位置
                    },
                    tooltip: {},
                    xAxis: {
                        type: 'category', //类目轴
                        data: month,
                    },
                    yAxis: {
                        /* name: '工事数量', */
                    },
                    legend: {
                        orient: 'horizontal',
                        itemGap: 40,
                        y: 'bottom',
                    },
                    series: [
                        {
                            name: "合格记录数",
                            type: 'bar',
                            data: qualifiedCount,
                            itemStyle: {
                                color: '#f06464',
                            },
                            barGap: '0%',
                        },
                        {
                            name: "合格车辆数",
                            type: 'bar',
                            data: qualifiedDistinct,
                            itemStyle: {
                                color: '#5690dd',
                            },
                            barGap: '0%',
                        },
                    ],
                })
        },
        noPass(result) {
            console.log(result)
            let month = []
            let noPassCount = []
            let noPassDistinct = []
            result.forEach((element) => {
                month.push(element.month)
                noPassCount.push(element.noPassCount)
                noPassDistinct.push(element.noPassDistinct)
            })
            let myChart = echarts.init(document.getElementById('noPass'));
            myChart.setOption(
                {
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true,
                                excludeComponents: ['toolbox'],
                                pixelRatio: 2 // 控制导出图片的分辨率  
                            }
                        }
                    },
                    title: {
                        text: "驳回记录与车辆数统计图",
                        textStyle: {
                            color: '#1E1E1E',
                            fontSize: 18,
                            fontWeight: 500,
                        },
                        padding: [20, 0, 20, 150], //标题位置
                    },
                    tooltip: {},
                    xAxis: {
                        type: 'category', //类目轴
                        data: month,
                    },
                    yAxis: {
                        /* name: '工事数量', */
                    },
                    legend: {
                        orient: 'horizontal',
                        itemGap: 40,
                        y: 'bottom',
                    },
                    series: [
                        {
                            name: "驳回记录数",
                            type: 'bar',
                            data: noPassCount,
                            itemStyle: {
                                color: '#f06464',
                            },
                            barGap: '0%',
                        },
                        {
                            name: "驳回车辆数",
                            type: 'bar',
                            data: noPassDistinct,
                            itemStyle: {
                                color: '#5690dd',
                            },
                            barGap: '0%',
                        },
                    ],
                })
        },
        unQualified(result) {
            console.log(result)
            let month = []
            let unQualifiedCount = []
            let unQualifiedDistinct = []
            result.forEach((element) => {
                month.push(element.month)
                unQualifiedCount.push(element.unQualifiedCount)
                unQualifiedDistinct.push(element.unQualifiedDistinct)
            })
            let myChart = echarts.init(document.getElementById('unQualified'));
            myChart.setOption(
                {
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true,
                                excludeComponents: ['toolbox'],
                                pixelRatio: 2 // 控制导出图片的分辨率  
                            }
                        }
                    },
                    title: {
                        text: "验罐不合格记录与车辆数统计图",
                        textStyle: {
                            color: '#1E1E1E',
                            fontSize: 18,
                            fontWeight: 500,
                        },
                        padding: [20, 0, 20, 150], //标题位置
                    },
                    tooltip: {},
                    xAxis: {
                        type: 'category', //类目轴
                        data: month,
                    },
                    yAxis: {
                        /* name: '工事数量', */
                    },
                    legend: {
                        orient: 'horizontal',
                        itemGap: 40,
                        y: 'bottom',
                    },
                    series: [
                        {
                            name: "验罐不合格记录数",
                            type: 'bar',
                            data: unQualifiedCount,
                            itemStyle: {
                                color: '#f06464',
                            },
                            barGap: '0%',
                        },
                        {
                            name: "验罐不合格车辆数",
                            type: 'bar',
                            data: unQualifiedDistinct,
                            itemStyle: {
                                color: '#5690dd',
                            },
                            barGap: '0%',
                        },
                    ],
                })
        },
        showPie(result) {
            console.log(result)
            let arr = []
            let all = result[0].total + result[1].noPassTotal + result[2].unqualifiedTotal
            arr.push({ value: result[0].total, name: "合格记录总数" })
            arr.push({ value: result[1].noPassTotal, name: "驳回记录总数" })
            arr.push({ value: result[2].unqualifiedTotal, name: "验罐不合格记录总数" })
            let myChart = echarts.init(document.getElementById('bing'));
            // 绘制图表
            myChart.setOption({
                color: ['#fc8251', '#5470c6', '#75bedc', '#ef6567', '#f9c956', '#75bedc', '#91cd77'],
                tooltip: {
                    trigger: 'item', //数据项图形触发
                    formatter: '{b}: {c} 条 ({d}%)', // 展示格式
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show: true,
                            excludeComponents: ['toolbox'],
                            pixelRatio: 2 // 控制导出图片的分辨率  
                        }
                    }
                },
                title: {
                    text: "油罐车检验合格率对比图",
                    textStyle: {
                        color: '#1E1E1E',
                        fontSize: 18,
                        fontWeight: 500,
                    },
                    padding: [0, 0, 100, 165], //标题位置
                },
                series: [
                    {
                        name: '记录总数',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: ['50%', '70%'],
                        clockwise: false,
                        label: {
                            normal: {
                                position: 'outside',
                                formatter: '{b}\n{c} 条 ({d}%)',
                            },
                        },
                        data: arr,
                    },
                ],
                graphic: {
                    elements: [
                        {
                            type: 'text', // 组件类型
                            left: 'center', //定位
                            top: '43%', // 定位
                            style: {
                                // 样式
                                text: '记录总数(条)', //文字
                                fontSize: 13, //文字大小
                                textAlign: 'center', //定位
                                width: 30,
                                height: 30,
                                fill: 'darkgray', // 字体颜色
                            },
                        },
                        {
                            type: 'text',
                            left: 'center',
                            top: '52%',
                            style: {
                                text: all,
                                fontSize: 18,
                                textAlign: 'center',
                                width: 30,
                                height: 25,
                                fill: '#3BA5D9',
                            },
                        },
                    ],
                },
            })
        },
    }
}
</script>
<style>
.sousuo {
    font-size: 14px;
    display: inline;
    /* font-weight:bold; */
}
.five {
    width: 100%;
    height: 100%;
}
.text {
    font-size: 14px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}
.clearfix:after {
    clear: both;
}

.box-card {
    /* width: 480px; */
    height: 180px;
}

.el-card__body {
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
}
</style>